import React from 'react';
import styled, { keyframes } from 'styled-components';

const NotFound: React.FC = () => {
  return (
    <Container>
      <AnimationContainer>
        <Character>
          <Head />
          <Body />
        </Character>
      </AnimationContainer>
      <TextContainer>
        <Title>404</Title>
        <Subtitle>Oops! 页面找不到了</Subtitle>
        <Description>
          很抱歉，您访问的页面不存在。<br />
          请返回首页或尝试其他链接。
        </Description>
        <BackButton onClick={() => window.location.href = '/'}>
          返回首页
        </BackButton>
      </TextContainer>
    </Container>
  );
};

export default NotFound;

// 样式和动画

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f8ff;
  text-align: center;
`;

const TextContainer = styled.div`
  margin-top: 20px;
`;

const Title = styled.h1`
  font-size: 4rem;
  color: #ff6b6b;
`;

const Subtitle = styled.h2`
  font-size: 1.5rem;
  color: #333;
`;

const Description = styled.p`
  font-size: 1rem;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
`;

const BackButton = styled.button`
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #ff8c8c;
  }
`;

// 动画效果
const float = keyframes`
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
`;

const AnimationContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Character = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ${float} 3s ease-in-out infinite;
`;

const Head = styled.div`
  width: 80px;
  height: 80px;
  background-color: #ff6b6b;
  border-radius: 50%;
  position: relative;
  margin-bottom: 10px;
  
  &::before, &::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 30px;
  }
  
  &::before {
    left: 20px;
  }
  
  &::after {
    right: 20px;
  }
`;

const Body = styled.div`
  width: 50px;
  height: 100px;
  background-color: #ff6b6b;
  border-radius: 25px;
`;
